<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar" @tap="goBack">
			<view class="back-icon">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">维修记录</view>
			<view class="right-icons">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="content-box">


			<!-- 核销码区域 -->
			<view class="qrcode-box white-box" style="text-align: center;">
				<text class="code-title">核销码：{{ verificationCode }}</text>
				<view style="margin-left: 38%;margin-top: 10rpx;">
					<uqrcode ref=" uqrcode" canvas-id="qrcode" :value="verificationCode" size="80" loading="true">
					</uqrcode>
				</view>

			</view>

			<!-- 维修信息 -->
			<view class="info-section white-box">
				<view class="section-title">维修信息</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">维修单号：</text>
						<text class="value">{{ orderInfo.orderNo }}</text>
					</view>
					<view class="info-item">
						<text class="label">维修状态：</text>
						<text class="value">{{ orderInfo.status }}</text>
					</view>
					<view class="info-item">
						<text class="label">车主姓名：</text>
						<text class="value">{{ orderInfo.ownerName }}</text>
					</view>
					<view class="info-item">
						<text class="label">联系方式：</text>
						<text class="value">{{ orderInfo.phone }}</text>
					</view>
					<view class="info-item">
						<text class="label">维修方式：</text>
						<text class="value">{{ orderInfo.repairType }}</text>
					</view>
					<view class="info-item">
						<text class="label">取车位置：</text>
						<text class="value">{{ orderInfo.location }}</text>
					</view>
					<view class="info-item">
						<text class="label">预约日期：</text>
						<text class="value">{{ orderInfo.appointmentTime }}</text>
					</view>
					<view class="info-item">
						<text class="label">提交日期：</text>
						<text class="value">{{ orderInfo.appointmentTime }}</text>
					</view>
					<!-- 其他信息项... -->
				</view>
			</view>

			<!-- 车辆信息 -->
			<view class="info-section white-box">
				<view class="section-title">车辆信息</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">车辆类型：</text>
						<text class="value">{{ carInfo.type }}</text>
					</view>
					<view class="info-item">
						<text class="label">车牌号：</text>
						<text class="value">{{ carInfo.plateNumber }}</text>
					</view>
					<view class="car-images">
						<text class="label">整车照片：</text><br>
						<image
							src="https://img1.baidu.com/it/u=176263258,4211624321&fm=253&fmt=auto&app=120&f=JPEG?w=887&h=500">
						</image>

					</view>
					<view class="car-images">
						<text class="label">维修部位照片：</text><br>
						<scroll-view scroll-x class="image-scroll">
							<image v-for="(item,index) in carInfo.partImages" :src=item style="margin-left: 5rpx;">
							</image>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->

		<view class="back-btn" @tap="cancelOrder">取消订单</view>

	</view>
</template>

<style lang="scss">
	.back-btn {
		background-color: #4080FF;
		width: 200rpx;
		color: #fff;
		float: right;
		border-radius: 29rpx;
		text-align: center;
		margin-right: 30rpx;
		line-height: 60rpx;

	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: var(--status-bar-height) 16px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-bar .title {
		color: #fff;
		font-size: 17px;
		font-weight: 500;
	}

	.section-title {
		font-size: 35rpx;
		border-bottom: 4rpx solid gainsboro;
		padding: 6rpx;
	}

	.info-list {
		margin-top: 2rpx;
		line-height: 60rpx;

	}

	.value {
		float: right;
		color: #c2c2c2;
	}

	.car-images {
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>

<script>
	export default {
		data() {
			return {
				verificationCode: 'WE343235V',
				orderInfo: {
					orderNo: '3535252',
					status: '进行中',
					ownerName: '张',
					phone: '19938292822',
					repairType: '上门取车',
					location: '山阳区32号',
					appointmentTime: '2022/11/10 11:00',
					submitTime: '2022/11/08 12:34'
				},
				carInfo: {
					type: '大客车',
					plateNumber: '豫J45323',
					fullImage: '',
					partImages: [
						'/static/carp.png',
						'/static/carp.png',
						'/static/carp.png'
					]
				}
			}
		},
		methods: {
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							// 处理取消订单逻辑
						}
					}
				})
			},
			goBack() {
				uni.navigateBack()
			},
		}
	}
</script>